<template>
  <div>
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <a-row>
            <a-col :md="8" :sm="8" :xs="8">
              <a-form-item label="本司货品" :colon="false">
                <template v-if="form.original_type == 1">是</template>
                <template v-else-if="form.original_type == 2">否</template>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8" :xs="8">
              <a-form-item label="换购方式" :colon="false">
                <template v-if="form.retail_type == 1">按件</template>
                <template v-else-if="form.retail_type == 2">按克</template>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :md="24" :sm="24" :xs="24">
          <div class="kd-solid">
            <div class="flex">
              <!-- 左侧-->
              <div class="flex1">
                <div class="flex align-center">
                  <div class="kd_left">图片</div>
                  <div class="kd_right flex align-center">
                    <a-image :width="30" :height="30" :src="form.thumb_url" />
                  </div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">原条码</div>
                  <div class="kd_right flex1">
                    <a-input
                      class="kd_inp"
                      v-model:value="form.bar_code"
                      :min="1"
                      all-clear
                      placeholder="请输入"
                    />
                  </div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">金料类型</div>
                  <div class="kd_right">{{
                    form.gold_category_code_name || ''
                  }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">小类</div>
                  <div class="kd_right">{{
                    form.subclass_code_name || ''
                  }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">成色</div>
                  <div class="kd_right">{{ form.quality_code_name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">宝石类型</div>
                  <div class="kd_right">{{ form.gem_category_name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">品类</div>
                  <div class="kd_right">{{ form.classes_name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">货品名称</div>
                  <div class="kd_right">{{ form.name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">数量</div>
                  <div class="kd_right">{{ form.num || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">原金重</div>
                  <div class="kd_right">{{ form.gold_weight_old || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">现金重</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      :min="1"
                      v-model:value="form.gold_weight"
                      all-clear
                      placeholder="请输入"
                      @change="changeW"
                    />
                  </div>
                  <span class="kd_right_text">g</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">货重</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      :min="1"
                      v-model:value="form.piece_weight"
                      all-clear
                      placeholder="请输入"
                    />
                  </div>
                  <span class="kd_right_text">g</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">实际成色</div>
                  <!-- <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      :min="1"
                      v-model:value="form.real_quality"
                      all-clear
                      placeholder="请输入"
                      @change="changeW"
                    />
                  </div> -->
                  <div class="kd_right flex1 flex">
                    <a-input-number
                      class="kd_inp flex1"
                      :min="0"
                      :max="100"
                      v-model:value="form.real_quality"
                      all-clear
                      placeholder="请输入(最大值100)"
                      @change="changeW"
                    />
                  </div>
                  <span class="kd_right_text">%</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">折足重</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      disabled
                      v-model:value="form.lumping_weight"
                      all-clear
                      placeholder="请输入"
                    />
                  </div>
                  <span class="kd_right_text">g</span>
                </div>
              </div>
              <!-- 右侧 -->
              <div class="flex1">
                <div class="flex align-center">
                  <div class="kd_left">标签价</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      v-model:value="form.sticker_price"
                      all-clear
                      placeholder="请输入"
                    />
                  </div>
                  <span class="kd_right_text">元</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">实售价</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      v-model:value="form.real_amount"
                      all-clear
                      placeholder="请输入"
                    />
                  </div>
                  <span class="kd_right_text">元</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">主石重量</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      v-model:value="form.main_stone_weight"
                      all-clear
                      placeholder="请输入"
                    />
                  </div>
                  <span class="kd_right_text">ct</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石颜色</div>
                  <div class="kd_right">{{ form.main_color_name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石净度</div>
                  <div class="kd_right">{{
                    form.main_neatness_name || ''
                  }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石切工</div>
                  <div class="kd_right">{{ form.main_cut_name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石数量</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      all-clear
                      placeholder="请输入"
                      v-model:value="form.main_stone_num"
                    />
                  </div>
                  <span class="kd_right_text">粒</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">副石石重</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      all-clear
                      placeholder="请输入"
                      v-model:value="form.vice_stone_weight"
                    />
                  </div>
                  <span class="kd_right_text">ct</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">副石数量</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      all-clear
                      placeholder="请输入"
                      v-model:value="form.vice_stone_num"
                    />
                  </div>
                  <span class="kd_right_text">粒</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">回收金价</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      all-clear
                      placeholder="请输入"
                      v-model:value="form.exchange_gold_price"
                    />
                  </div>
                  <span class="kd_right_text">元</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">回收金额</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      all-clear
                      placeholder="请输入"
                      v-model:value="form.deduct_amount"
                    />
                  </div>
                  <span class="kd_right_text">元</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">旧货标记</div>
                  <div class="kd_right flex1 flex align-center">
                    <a-select
                      class="kd_inp flex1"
                      optionFilterProp="label"
                      :options="signOptions"
                      allow-clear
                      placeholder="请选择"
                      v-model:value="form.junk_tag_code"
                    />
                  </div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">旧货备注</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="text"
                      class="kd_inp"
                      all-clear
                      placeholder="请输入"
                      v-model:value="form.note"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { Modal, message, Form } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { uploadUrl } from '@/config/setting';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import {
    get_buy_detail,
    junk_recovery
  } from '@/api/order/order/jewelry_order';
  import { get_list } from '@/api/setting/sales_subject';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    member_id: [Number, String],
    bar_code: String
  });

  const emit = defineEmits([
    'done',
    'get_been_order',
    'update:visible',
    'changeShow'
  ]);

  const loading = ref(false);
  const signOptions = ref([]);

  const form = reactive({
    member_id: props.member_id,
    original_type: '1',
    retail_type: '1',
    goods_code: '',
    thumb: '',
    thumb_url: '',
    bar_code: props.bar_code,
    gold_category_code: '',
    gold_category_code_name: '',
    subclass_code: '',
    subclass_code_name: '',
    quality_code: '',
    quality_code_name: '',
    gem_category_code: '',
    gem_category_name: '',
    classes_code: '',
    classes_name: '',
    name: '',
    num: '',
    gold_weight_old: '',
    gold_weight: '',
    piece_weight: '',
    real_quality: '',
    lumping_weight: '',
    sticker_price: '',
    real_amount: '',
    main_stone_weight: '',
    main_stone_color: '',
    main_color_name: '',
    main_stone_neatness: '',
    main_neatness_name: '',
    main_stone_cut: '',
    main_cut_name: '',
    main_stone_num: '',
    vice_stone_weight: '',
    vice_stone_num: '',
    exchange_gold_price: '',
    /* exchange_labour_type: '1',
		exchange_labour: '', */
    deduct_amount: '',
    junk_tag_code: '',
    note: ''
  });

  watch(
    () => [form.lumping_weight, form.exchange_gold_price],
    (newValue, oldValue) => {
      //回收金额：折足重✖回收金价
      //折足重：实际成色✖现金重
      //if (form.bar_code) {
      form.deduct_amount = (
        Number(form.lumping_weight) * Number(form.exchange_gold_price)
      ).toFixed(2);
      //}
    }
  );

  onMounted(() => {
    get_list({
      page: 1,
      page_size: 99999,
      filters: {
        type: 'sales'
      }
    }).then((res) => {
      res.list.forEach((item) => {
        signOptions.value.push({
          label: item.name,
          value: item.code
        });
      });
    });

    if (form.bar_code) {
      getDetail();
    }
  });

  const getDetail = () => {
    get_buy_detail({
      member_id: props.member_id,
      bar_code: form.bar_code
    }).then((res) => {
      console.log(res);
      Object.keys(form).forEach((key) => {
        if (key == 'real_quality') {
          form[key] = res[key] ? res[key] : 100;
        } else {
          form[key] = res[key] ? res[key] : null;
        }
      });
      form.gold_weight_old = res.gold_weight;
      form.thumb_url = res.thumb_url;
      form.exchange_labour_type = '1';
      form.original_type = res.exchange_original_type;
      form.goods_code = '';
      changeW();
      form.deduct_amount = (
        Number(form.lumping_weight) * Number(form.exchange_gold_price)
      ).toFixed(2);
    });
  };
  const getSmallChange = (val) => {
    console.log('val==111===', val);

    Object.keys(form).forEach((key) => {
      form[key] = val[key] ? val[key] : null;
    });
    form.original_type = val.exchange_original_type;
    form.classes_name = val.classes_code_name;
    form.order_sn = val.order_sn;
    form.deduct_amount = val.discount_amount;
    form.lumping_weight =
      Number(val.gold_weight) * (Number(val.real_quality) / 100);
    form.small_change1 = val.small_change;
    form.small_change2 = val.small_change2;
    form.small_change3 = val.small_change3;
    form.small_change =
      Number(val.small_change) +
      Number(val.small_change2) +
      Number(val.small_change3);
    console.log('val==2222===', form);
  };

  const changeW = (e) => {
    form.lumping_weight = (
      form.gold_weight *
      (form.real_quality / 100)
    ).toFixed(2);
  };
  const save = () => {
    console.log(form);
    junk_recovery(form)
      .then((res) => {
        emit('get_been_order');
        emit('changeShow');
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };

  defineExpose({
    getSmallChange,
    save
  });
</script>
<style scoped></style>
